<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>柒拾客服</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/main.css" />
		<style>
			.mui-bar-nav~.mui-content {
				margin-top: 10px;
			}
			
			body,
			html {
				/*height: 100%;*/
			}
			
			.mui-content {
				margin-bottom: 50px;
			}
			
			.mui-slider-handle {
				padding: 2%;
			}
			
			.head-img {
				width: 40px;
				height: 40px;
				border-radius: 50%;
			}
			
			.mui-media-body {
				width: 70%;
				color: #666666;
				font-size: 14px;
				padding: 2%;
				margin-left: 13%;
				border: 1px solid #fff;
				background-color: #fff;
				border-bottom-left-radius: 10px;
				border-top-right-radius: 10px;
				border-bottom-right-radius: 10px;
			}
			
			.yh-answer {
				border-top-left-radius: 10px;
				border-bottom-right-radius: 0;
			}
			
			.question-list {
				list-style: none;
				padding: 2% 0;
			}
			
			.click-question {
				color: #00C0FF;
			}
			
			.satisfaction {
				margin: 30px;
				background-size: 100%;
				background-repeat: no-repeat;
				background-image: url(../../images/kfbj.png);
				text-align: center;
			}
			
			.button-agree {
				padding-top: 60%;
				padding-bottom: 10%;
				text-align: center;
			}
			
			.agree-yes,
			.agree-no,
			.to-labour {
				color: #FFFFFF;
				border-color: #FFFFFF;
			}
			
			.agree-yes {
				padding: 10px 32%;
				background-color: #ffbc45;
			}
			
			.agree-no {
				padding: 10px 29%;
				background-color: #ffe0a7;
			}
			
			.to-labour {
				padding: 10px 15%;
				background-color: #ffbc45;
			}
			
			footer {
				position: fixed;
				width: 100%;
				height: 50px;
				min-height: 50px;
				border-top: solid 1px #bbb;
				left: 0px;
				bottom: 0px;
				overflow: hidden;
				padding: 0px 50px;
				background-color: #fafafa;
			}
			
			.footer-left {
				position: absolute;
				width: 85%;
				height: 50px;
				left: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 6px 0px 6px 14px;
			}
			
			.footer-right {
				position: absolute;
				width: 50px;
				height: 50px;
				right: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 12px 5px;
				display: inline-block;
			}
			
			.footer-left [class*=input] {
				width: 100%;
				height: 100%;
				border-radius: 5px;
			}
			
			.footer-left .input-text {
				background: #fff;
				border: solid 1px #ddd;
				padding: 10px !important;
				font-size: 16px !important;
				line-height: 18px !important;
				font-family: verdana !important;
				overflow: hidden;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">小柒客服</h1>

		</header>
		<div class="mui-content" id="content">

			<div class="mui-slider-handle" id="guideHelloDiv">
				<div class="mui-media-object mui-pull-left">
					<img class="head-img" src="../../images/xiao7.png">
				</div>
				<div class="mui-media-body" id="guideHello"></div>
			</div>

			<div id="guideDiv"></div>
			<!--<div class="mui-slider-handle">
				<div class="mui-media-object mui-pull-left">
					<img class="head-img" src="../../images/003.png">
				</div>
				<div class="mui-media-body">
					<ul class="">
						<li class="question-list">1.how to order？</li>
						<li class="question-list">2.hhahhahahaa？</li>
						<li class="question-list">3.how back money？</li>
						<li class="question-list">4.delay,what shoud i do？</li>
					</ul>
				</div>
			</div>-->

			<div id="answerDiv"></div>
			<!--<div class="mui-slider-handle" id="questionShow">
				<div class="mui-media-object mui-pull-right">
					<img class="head-img" src="../../images/003.png">
				</div>
				<div class="mui-media-body yh-answer">55555</div>
			</div>-->
			<!--<div class="mui-slider-handle">
				<div class="mui-media-object mui-pull-left">
					<img class="head-img" src="../../images/003.png">
				</div>
				<div class="mui-media-body">
					<ul class="">
						<li id="answerques" class="question-list"></li>
					</ul>
				</div>
			</div>-->
			<div class="satisfaction">
				<div class="button-agree" id="labour">
					<button class="to-labour">转人工服务</button>
				</div>
				<div class="button-agree mui-row" id="agree">
					<div class="mui-col-xs-6"><button class="agree-yes">满意</button></div>
					<div class="mui-col-xs-6"><button class="agree-no">不满意</button></div>
				</div>
			</div>

		</div>
		<footer id="footer">
			<div class="footer-left">
				<textarea id='msg-text' type="text" class='input-text'></textarea>
			</div>
			<label id="enterQuestion" class="footer-right"><p style="margin-top: 5px;">发送</p></label>
		</footer>
	</body>
	<script type="text/javascript" src="../../js/mui.min.js"></script>
	<script type="text/javascript" src="../../plugs/qs/qs.immersed.js"></script>
	<script type="text/javascript" src="../../js/app.js"></script>
	<script type="text/javascript" src="../../js/constants.js"></script>
	<script type="text/javascript" src="../../js/sharemethods.js"></script>
	<script type="text/javascript" src="../../js/xiangyingshi.js"></script>
	<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="../../js/jquery-labelauty.js"></script>

	<script type="text/javascript" src="../../plugs/moment/moment.min.js"></script>
	<script type="text/javascript" src="../../js/art/template-web.js"></script>
	<script type="text/javascript" src="../../js/qs/qs.art.extend.js"></script>
	<script type="text/javascript" src="../../js/qs/qs.template.js"></script>
	<script type="text/javascript" src="../../js/iscroll/iscroll-probe.js"></script>
	<script type="text/javascript" src="../../js/qs/qs.iscroll.js"></script>
	<script>
		$('.satisfaction').hide();
		$("#labour").hide();
		$("#guideHelloDiv").hide()
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		mui.plusReady(function() {
			if(plus.navigator.isImmersedStatusbar()) { // 兼容immersed状态栏模式
				// 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置
				topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + 'px';
				document.querySelector("header").style.height = topoffset;
				document.querySelector("header").style.paddingTop = "20px";
				document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = topoffset;
			}
			// 加载完毕后关闭等待框，并展示页面
			var currentView = plus.webview.currentWebview();
			currentView.show('slide-in-right', 200);
			plus.nativeUI.closeWaiting();

			var user = localStorage.getItem("HEAD_PHOTO");
			var userPic = serverAddress + "/" + user.replace('client', '').replace(/\\/g, "/")
			console.log("userPic:" + userPic);
			//获取前导页问候语
			var guideHelloUrl = serverAddress + "/api/appproblem/listhello";
			var fdtpatientsussess = function(data) {
				console.log("hello:" + JSON.stringify(data.data));
				if(data.result == "success") {
					$("#guideHelloDiv").show();
					$("#guideHello").html(data.data[0].mainLabel);
				} else {
					mui.toast(data.msg);
				}
			};
			commonHttpUtils(guideHelloUrl, "get", {}, fdtpatientsussess, error);

			//获取前导问题
			var guideUrl = serverAddress + "/api/appproblem/listrecommend";
			var fdtpatientsussess = function(data) {
				console.log(JSON.stringify(data.data));
				if(data.result == "success") {
					var tlData = {
						sub: data.data,
						userPic: userPic
					}
					$("#guideDiv").processTL(templateRegister.guide, tlData, 'append', function() {})

				} else {
					mui.toast(data.msg);
				}
			};
			commonHttpUtils(guideUrl, "get", {}, fdtpatientsussess, error);

			//用户提问选择前导问题
			$('.mui-content').on('tap', '.question-list', function(event) {
				var id = $(this).attr("data-id");
				$(this).addClass("click-question")
				var questionMain = $(this).attr("data-con");
				//用户提问回答
				var answerUrl = serverAddress + "/api/appproblem/readproblemDetail/" + id;
				var sussess = function(data) {
					console.log(JSON.stringify(data));
					if(data.result == "success") {
						var anData = {
							sub: data.data,
							ques: questionMain,
							userPic: userPic
						}
						$("#answerDiv").processTL(templateRegister.answer, anData, 'append', function() {});
						$('.satisfaction').show();
						$('html,body').animate({
							scrollTop: $('#footer').offset().top
						}, 1000);

					} else {
						mui.toast(data.msg);
					}
				};
				commonHttpUtils(answerUrl, "get", {}, sussess, error);
			});

			//用户提问输入模糊搜索
			$('#footer').on('tap', '#enterQuestion', function(event) {
				var questionMain = $("#msg-text").val();
				if(!questionMain && questionMain == "") {
					mui.toast("请输入搜索关键字");
					return false;
				}
				//用户提问回答
				var answerSearchUrl = serverAddress + "/api/appproblem/showProblemDetailListPost";
				var sussess = function(data) {
					console.log(JSON.stringify(data));
					if(data.result == "success") {
						var anData = {
							sub: data.data,
							ques: questionMain,
							userPic: userPic
						}
						$("#answerDiv").processTL(templateRegister.guide, anData, 'append', function() {});
						$('.satisfaction').show();
						$('html,body').animate({
							scrollTop: $('#footer').offset().top
						}, 1000);

					} else {
						mui.toast(data.msg);
					}
				};
				commonHttpUtils(answerSearchUrl, "POST", {
					keyword: questionMain
				}, sussess, error);
			});

			//选择满意
			$('.mui-content').on('tap', '.agree-yes', function(event) {
				mui.back();

			});

			//选择不满意
			$('.mui-content').on('tap', '.agree-no', function(event) {
				$("#labour").show();
				$("#agree").hide();
				
			});
			mui(".mui-content").on("tap", "#labour", function() {
					var dataId = "admin";
					var name = "客服人员";
					console.log("聊天id=" + dataId);
					mui.openWindow({
						url: '../../familydoctor/im-chat.html',
						id: 'im-chat.html',
						show: {
							autoShow: false, //页面loaded事件发生后自动显示，默认为true
							event: 'loaded' //页面显示时机，默认为titleUpdate事件时显示
						},
						waiting: {
							autoShow: true //自动显示等待框，默认为true
						},
						extras: {
							TO_ACCOUNT: dataId,
							TO_NAME: name
						}
					});
				});

		});
	</script>

</html>